<script setup>
import { ref, onMounted } from 'vue'
import { listIndicators, createIndicator, updateIndicator, deleteIndicator, listIndicatorCategories } from '../../api/admin'
import { ElMessage, ElMessageBox } from 'element-plus'

const list = ref([])
const total = ref(0)
const categories = ref([])
const categoryMap = ref({})
const query = ref({ code: '', name: '', categoryId: '', page: 1, size: 10 })
const loading = ref(false)
const dialogVisible = ref(false)
const form = ref({ indicatorId: null, indicatorCode: '', indicatorName: '', categoryId: '', unit: '', lowerLimit: null, upperLimit: null })

const fetchList = async () => {
  loading.value = true
  try {
    const data = await listIndicators({ code: query.value.code || undefined, name: query.value.name || undefined, categoryId: query.value.categoryId || undefined, page: query.value.page, size: query.value.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

const fetchCategories = async () => {
  const data = await listIndicatorCategories({ page: 1, size: 100 })
  const arr = (data.list || []).map(it => ({ label: it.categoryName, value: it.categoryId }))
  categories.value = arr
  categoryMap.value = Object.fromEntries(arr.map(it => [it.value, it.label]))
}

const openCreate = () => { form.value = { indicatorId: null, indicatorCode: '', indicatorName: '', categoryId: '', unit: '', lowerLimit: null, upperLimit: null }; dialogVisible.value = true }
const openEdit = (row) => { form.value = { indicatorId: row.indicatorId, indicatorCode: row.indicatorCode, indicatorName: row.indicatorName, categoryId: row.categoryId, unit: row.unit || '', lowerLimit: row.lowerLimit ?? null, upperLimit: row.upperLimit ?? null }; dialogVisible.value = true }

const submit = async () => {
  loading.value = true
  try {
    const payload = { indicatorCode: form.value.indicatorCode, indicatorName: form.value.indicatorName, categoryId: form.value.categoryId, unit: form.value.unit || undefined, lowerLimit: form.value.lowerLimit ?? undefined, upperLimit: form.value.upperLimit ?? undefined }
    if (form.value.indicatorId) {
      await updateIndicator(form.value.indicatorId, payload)
    } else {
      await createIndicator(payload)
    }
    ElMessage.success('保存成功')
    dialogVisible.value = false
    fetchList()
  } finally { loading.value = false }
}

const remove = async (row) => {
  await ElMessageBox.confirm('确认删除该检查指标？', '提示')
  await deleteIndicator(row.indicatorId)
  ElMessage.success('删除成功')
  fetchList()
}

onMounted(async () => { await fetchCategories(); await fetchList() })
</script>

<template>
  <el-card>
    <div class="header">
      <h3>检查指标管理</h3>
      <div class="header-actions">
        <el-button @click="fetchList">刷新</el-button>
        <el-button type="primary" @click="openCreate">新增指标</el-button>
      </div>
    </div>
    <el-form :inline="true" :model="query" class="mb-2">
      <el-form-item label="代码"><el-input v-model="query.code" placeholder="如: ALT" clearable @keyup.enter="query.page=1;fetchList()" /></el-form-item>
      <el-form-item label="名称"><el-input v-model="query.name" placeholder="如: 谷丙转氨酶" clearable @keyup.enter="query.page=1;fetchList()" /></el-form-item>
      <el-form-item label="类别">
        <el-select v-model="query.categoryId" style="width:160px" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option v-for="c in categories" :key="c.value" :label="c.label" :value="c.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query.page=1;fetchList()">查询</el-button>
        <el-button @click="query.code=''; query.name=''; query.categoryId=''; query.page=1; fetchList()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" v-loading="loading" style="width:100%">
      <el-table-column prop="indicatorId" label="ID" width="80" />
      <el-table-column prop="indicatorCode" label="代码" />
      <el-table-column prop="indicatorName" label="名称" />
      <el-table-column prop="unit" label="单位" width="120" />
      <el-table-column label="参考范围" width="180">
        <template #default="{ row }">
          <span v-if="row.lowerLimit!=null || row.upperLimit!=null">{{ row.lowerLimit ?? '-' }} ~ {{ row.upperLimit ?? '-' }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="类别" width="160">
        <template #default="{ row }">
          <el-tag v-if="categoryMap[row.categoryId]" type="info">{{ categoryMap[row.categoryId] }}</el-tag>
          <span v-else>{{ row.categoryId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button size="small" @click="openEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据，尝试调整筛选或点击右上角新增指标" />
      </template>
    </el-table>
    <el-pagination class="mt-2" background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
  </el-card>

  <el-dialog v-model="dialogVisible" title="指标信息" width="520px">
    <el-form :model="form" label-width="120px">
      <el-form-item label="代码"><el-input v-model="form.indicatorCode" /></el-form-item>
      <el-form-item label="名称"><el-input v-model="form.indicatorName" /></el-form-item>
      <el-form-item label="类别"><el-select v-model="form.categoryId" style="width:200px" placeholder="请选择"><el-option v-for="c in categories" :key="c.value" :label="c.label" :value="c.value" /></el-select></el-form-item>
      <el-form-item label="单位"><el-input v-model="form.unit" placeholder="如: U/L, mmol/L" /></el-form-item>
      <el-form-item label="下限"><el-input-number v-model="form.lowerLimit" :min="-999999" :max="999999" :step="0.01" controls-position="right" /></el-form-item>
      <el-form-item label="上限"><el-input-number v-model="form.upperLimit" :min="-999999" :max="999999" :step="0.01" controls-position="right" /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
 .header{ display:flex; justify-content:space-between; align-items:center; }
 .header-actions{ display:flex; gap:8px; }
 .mb-2{ margin-bottom:12px; }
 .mt-2{ margin-top:12px; }
</style>